<template>
  <div class="page-box">
    <div class="flex-left">
      <ShuJuTongJi :dataStatistics="dataStatistics" />
      <ManYiDuTongJiBi :satisfactionLeve="satisfactionLeve" />
      <ZuiXinAnJian :streetId="streetId" :type="type" :classOption="classOption" :scrollData="scrollData" />
      <!-- <left-bottom /> -->
    </div>
    <div class="flex-right">
      <!-- :streetId="streetId" :type="type"-->
      <right-top :streetCase="streetCase" />
      <LeiXingTongji :streetCaseType="streetCaseType" />
      <BuMenAnJianTongJi :departmentCase="departmentCase" />
    </div>

    <!-- 选择街办 -->
    <div class="postion_reletive">
      <el-select @change="selectStreet" v-model="streetId" :popper-append-to-body="false" style="margin-right: 10px;">
        <el-option label="小店区" value="0"></el-option>
        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"> </el-option>
      </el-select>
      <el-select @change="selectTime" v-model="type" :popper-append-to-body="false">
        <el-option v-for="item in typeOtions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import ShuJuTongJi from './components/ShuJuTongJi'
import ManYiDuTongJiBi from './components/ManYiDuTongJiBi'
import ZuiXinAnJian from './components/ZuiXinAnJian'
import LeiXingTongji from './components/LeiXingTongji'
import BuMenAnJianTongJi from './components/BuMenAnJianTongJi'
import RightTop from './components/RightTop'
import Bus from '@/untils/bus'
import { getDangQianJieDaoList, JieXiangChuiShaoDB } from '@/api'

export default {
  components: {
    ShuJuTongJi,
    ManYiDuTongJiBi,
    ZuiXinAnJian,
    RightTop,
    LeiXingTongji,
    BuMenAnJianTongJi
  },
  data() {
    return {
      options: [
        {
          value: 0,
          label: ''
        }
      ],
      typeOtions: [
        {
          value: '1',
          label: '本月'
        },
        {
          value: '2',
          label: '本年'
        }
      ],
      street: 0,
      streetId: '0', //id
      type: '2',
      scrollData: [],
      // 最新案件
      classOption: {
        direction: 1,
        step: 0.5
      },
      // 数据统计
      dataStatistics: [],
      //满意度统计
      satisfactionLeve: [],
      streetCase: [],
      streetCaseType: [],
      departmentCase: []
    }
  },
  mounted() {
    this.getViDeviceStreet()
    this.init()
  },
  methods: {
    init() {
      this.getShuJuTongJi()
      this.getManYiDuTongJiBi()
      this.getZuiXinAnJianList()
      this.getJieXiangAnJian()
      this.getJieXiangAnJianLeiXing()
      this.getBuMenAnJian()
    },
    // 街办列表
    async getViDeviceStreet() {
      const res = await getDangQianJieDaoList()
      this.options = res.data
      // this.streetId = '1298860969509908481';
    },
    // 选择街办,社区
    selectStreet(value) {
      this.clearArray()
      this.init()
      if (value === '0') {
        Bus.$emit('SelectStreetChuiShao', { value: '0', label: '小店区' })
      } else {
        this.options.forEach((item) => {
          if (value == item.id) {
            Bus.$emit('SelectStreetChuiShao', item)
          }
        })
      }
    },
    // 选择时间
    selectTime(value) {
      console.log(value)
      this.clearArray()
      this.init()
      this.typeOtions.forEach((item) => {
        if (value == item.value) {
          Bus.$emit('SelectStreetTime', item)
        }
      })
    },
    // 清空数组
    clearArray() {
      this.scrollDatab = []
      this.dataStatistics = []
      this.satisfactionLeve = []
      this.streetCase = []
      this.streetCaseType = []
      this.departmentCase = []
    },
    // 获取统计列表
    getShuJuTongJi() {
      JieXiangChuiShaoDB.getOaStreetWhistleOrdert({ streetId: this.streetId, type: this.type }).then((res) => {
        console.log(res.data)
        this.dataStatistics = res.data
      })
    },
    // 满意度统计
    getManYiDuTongJiBi() {
      JieXiangChuiShaoDB.getOaStreetWhistleOrdertSatisfactionLeve({ streetId: this.streetId, type: this.type }).then(
        (res) => {
          this.satisfactionLeve = res.data
        }
      )
    },
    //获取最新案件
    getZuiXinAnJianList() {
      JieXiangChuiShaoDB.getOaStreetWhistleOrdertNewStreetOrder({ streetId: this.streetId }).then((res) => {
        this.scrollData = res.data
      })
    },
    // 街乡吹哨案件统计
    getJieXiangAnJian() {
      JieXiangChuiShaoDB.getOaStreetWhistleOrdertStreetOrderNum({ streetId: this.streetId, type: this.type }).then(
        (res) => {
          this.streetCase = res.data
        }
      )
    },
    // 街乡吹哨案件类型统计
    getJieXiangAnJianLeiXing() {
      JieXiangChuiShaoDB.getOaStreetWhistleOrdertStreetOrderType({ streetId: this.streetId, type: this.type }).then(
        (res) => {
          this.streetCaseType = res.data.splice(0, 5)
        }
      )
    },
    // 部门吹哨案件统计
    getBuMenAnJian() {
      JieXiangChuiShaoDB.getOaStreetWhistleOrdertOrgOrderNum({ streetId: this.streetId, type: this.type }).then(
        (res) => {
          this.departmentCase = res.data
        }
      )
    }
  }
}
</script>
<style lang="less" scoped>
.leftbtn {
  background-color: #182236;
}

.postion_reletive {
  width: 500px;
  position: relative;
  left: 550px;
  top: 0px;
  display: flex;
  height: auto;
  align-items: flex-start;

  /deep/ .el-input__inner {
    padding-left: 20px;
    width: 200px;
    height: 44px;
    background: rgba(4, 11, 32, 0.7);
    border: 1px solid #16d0ff;
    box-shadow: 0px 0px 19px 1px #173c90;
    border-radius: 8px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    opacity: 0.7;
  }

  /deep/ .el-select-dropdown {
    position: relative !important;
    top: 0 !important;
  }

  // /deep/ .el-icon-arrow-up:before {
  //   content: "";
  //   background: url("../../assets/images/yingpanshidian/sanjiao.png") center center no-repeat;
  //   background-size: 10px 8px;
  //   position: absolute;
  //   width: 100%;
  //   height: 100%;
  //   top: 50%;
  //   left: 80%;
  //   transform: translate(-80%, -50%) rotate(180deg);
  // }
}

/deep/.el-scrollbar {
  // min-height: 450px;

  .el-select-dropdown__wrap {
    // min-height: 450px;
  }

  .el-scrollbar__bar {
    display: none;
  }

  ::-webkit-scrollbar-track {
    display: none;
  }
}
</style>